<template>
	<scroll-view class="main-match">
		<cu-custom bgColor="bg-gradual-pink" :isBack="false">
			<block slot="content">赛事信息</block>
		</cu-custom>
		
		<view class="cu-bar  search flex">
			<view hover-class="none" class="flex-sub padding-t" @tap="showModal" data-target="DrawerModalL">筛选<label class="cuIcon-qrcode"></label></view>
			<view class="flex-fiv padding-t">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入搜索的关键词" v-model="searchval" @input="search_match" confirm-type="search"></input>
				</view>
			</view>
		</view>
		<view class=" grid col-6 sel-info" >
			<view class="cu-tag radius bg-cyan sel-option" v-show="sx_type.type!=-1">{{sx_type.name}}</view>
			<view class="cu-tag radius bg-cyan sel-option" v-show="sx_state.state!=-1">{{sx_state.name}}</view>
			<view class="cu-tag radius bg-cyan sel-option" v-show="sx_timelength.timelength!=-1">{{sx_timelength.name}}</view>
			<view class="cu-tag radius bg-cyan sel-option" v-for="(item,index) in sx_prov" :key="index">{{item.name}}</view>
		</view>
		<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''">
			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="clearModal">清空</view>
					<view class="action text-green" @tap="sxSureModal">确定</view>
				</view>
				<view class="sx-title">状态</view>
				<view class="grid col-4">
					<view v-for="(item,index) in statecheck"  :key="index">
						<button  class="sx-content" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
						 :data-value="item.state"> {{item.name}}
						</button>
					</view>
				</view>
				<view class="sx-title">时间</view>
				<view class="grid col-4">
					<view v-for="(item,index) in timecheck"  :key="index">
						<button  class="sx-content" :class="item.checked?'bg-orange':'line-orange'" @tap="timeCheckbox"
						 :data-value="item.timelength"> {{item.name}}
						</button>
					</view>
				</view>
				<view class="sx-title">类型</view>
				<view class="grid col-4">
					<view v-for="(item,index) in typecheck"  :key="index">
						<button  class="sx-content" :class="item.checked?'bg-orange':'line-orange'" @tap="typeCheckbox"
						 :data-value="item.type"> {{item.name}}
						</button>
					</view>
				</view>
				<view class="sx-title">地区</view>
				<view class="grid col-4">
					<view v-for="(item,index) in provincecheck"  :key="index">
						<button  class="sx-content" :class="item.checked?'bg-orange':'line-orange'" @tap="provinCheckbox"
						 :data-value="item.id"> {{item.name}}
						</button>
					</view>
				</view>
			</view>
		</view>
		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="matchlist cu-card article"> 
			<navigator class="cu-item shadow" v-for="(item,index) in newml" :data-mid="item.id" :key="index" :url="'/pages/tennis/match/matchinfo?mid='+item.id">
				<view class="title">
					<view class="week">{{item.weekday}}</view>
					<view class="text-cut">{{ item.stardate}}</view>
				</view>
				<view class="content">
					<image :src="item.firimg.length>0?imgurl+item.firimg:''"
					 mode="aspectFill"></image>
					<view class="desc">
						<view class="text-content">
							<view class="matchinfo">赛事名称：{{item.matchname}}</view>
							<view class="matchinfo">比赛项目：{{item.subjectlist}}</view>
							<view class="matchinfo">比赛开始时间：{{item.stardate}}</view>
						</view>
						<view>
							<view class="cu-tag bg-red light sm round">{{item.type==1?"个人赛":"团队赛"}}</view>
							<view class="cu-tag light sm round" :class="(item.state==1|| item.state==3)?'bg-blue':'bg-gray'">{{item.state==1?"报名中":item.state==2?"报名结束":item.state==3?"比赛中":item.state==4?"已结束":item.state==0?"改期":"其他"}}</view>
						</view>
					</view>
				</view>
				<view v-show="item.state==0 || item.state==-1" class="tips"><label class="bg-red upreason" >{{item.state==0?'改':'停'}}</label>{{item.updatereason}}</view>
			</navigator>
		</view>
		
		<view class="flex cd-match padding justify-end">
			<view class="cu-tag bg-blue light  round " @click="createPer">发布个人赛</view>
			<view class="cu-tag bg-blue light  round " @click="createTeam">发布团体赛</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {

		onShow() {
			this.userid=uni.getStorageSync("uid");
			this.openid=uni.getStorageSync('openid');
			uni.showLoading({
				title:'加载中..'
			});
			
			uni.request({
				url: 'https://www.52tennis.cn/Match/GetMatchList', //仅为示例，并非真实接口地址。
				data: {
					state:-2,
					timelength:4,
					type:0,
					provinces:'',
					currpage:1,
					pagesize:20,
					openid:'',
					ismycreate:0
				   //state=1&timelength=3&type=1&provinces=&currpage=1&pagesize=1&openid=&ismycreate=1
				},
				success:(data)=> {
					if(data.data.result==1){
						
						this.matchList=data.data.returnjson;
						this.newml=this.matchList;
					}else{
						uni.showToast({
							title: '请求错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
				fail:(res)=>{
					uni.showToast({
						title: '请求失败',
						icon: 'fail',
						mask: true,
						duration: 2000
					})
				},
				complete:()=>{
					uni.hideLoading()
				}
			}),
			uni.request({
				url:"https://www.52tennis.cn/Match/GetCity",
				data: {
					parentid:0
				},
				success:(data)=> {
					if(data.data.result==1){
						for (let i=0 ;i<data.data.returnjson.length;i++) {
							let pros=data.data.returnjson[i];
							this.provincecheck.push({"id":pros.id,"name":pros.name,"checked":false});
						}
						
						return this.provincecheck;
					}else{
						uni.showToast({
							title: '请求错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
			})
		},
		data() {
			return {
				imgurl:this.websiteUrl,
				userid:0,
				openid:"",
				CustomBar: this.CustomBar,
				modalName: null,
				cardCur: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				matchList:[],
				searchval:'',
				newml:[],
				statecheck:[
					{"state":1,"name":"报名中","checked":false},
					{"state":2,"name":"即将开始","checked":false},
					{"state":3,"name":"比赛中","checked":false},
					{"state":4,"name":"已结束","checked":false}],
				timecheck:[
					{"timelength":1,"name":"一周内","checked":false},
					{"timelength":2,"name":"两周内","checked":false},
					{"timelength":3,"name":"一个月内","checked":false}
				],
				typecheck:[
					{"type":1,"name":"个人赛","checked":false},
					{"type":2,"name":"团体赛","checked":false},
					
				],
				provincecheck:[],
				sx_type:{"type":-1,"name":""},
				sx_state:{"state":-1,"name":""},
				sx_timelength:{"timelength":-1,"name":""},
				sx_prov:[]
			}
		},
		methods: {
			createPer(e){
				if(this.userid.length<=0 || this.openid.length<=0){
					uni.showModal({
					    title: '登陆提示',
					    content: '您暂未登陆,是否马上登陆',
					    success: function (res) {
					        if (res.confirm) {
								uni.switchTab({
					          		url:"/pages/tennis/user/index"
								})
					        } else if (res.cancel) {
					           
					        }
					    }
					});
				}else{
					let csid= e.currentTarget.dataset.csid;
					uni.navigateTo({
						url:"/pages/tennis/match/addPerMatch"
					})
				}
			},
			createTeam(e){
				if(this.userid.length<=0 || this.openid.length<=0){
					uni.showModal({
					    title: '登陆提示',
					    content: '您暂未登陆,是否马上登陆',
					    success: function (res) {
					        if (res.confirm) {
								uni.switchTab({
					          		url:"/pages/tennis/user/index"
								})
					        } else if (res.cancel) {
					           
					        }
					    }
					});
				}else{
					let csid= e.currentTarget.dataset.csid;
					uni.navigateTo({
						url:"/pages/tennis/match/addTeamMatch"
					})
				}
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			
			sxSureModal(e){
				this.modalName = null;
				
				let pro = "";
				for(let i=0 ;i<this.sx_prov.length;i++){
					pro+=this.sx_prov[i].name+",";
				}
				if(pro.length>0){
					pro=pro.substring(0,pro.length-1);
				}
				uni.showLoading({
					title:'加载中..'
				});
				uni.request({
					url: 'https://www.52tennis.cn/Match/GetMatchList', //仅为示例，并非真实接口地址。
					data: {
						state:this.sx_state.state==-1?-2:this.sx_state.state,
						timelength:this.sx_timelength.timelength==-1?4:this.sx_timelength.timelength,
						type:this.sx_type.type==-1?0:this.sx_type.type,
						provinces:pro,
						currpage:1,
						pagesize:10,
						openid:'',
						ismycreate:1
					   //state=1&timelength=3&type=1&provinces=&currpage=1&pagesize=1&openid=&ismycreate=1
					},
					success:(data)=> {
						if(data.data.result==1){
							this.matchList=data.data.returnjson;
							this.newml=this.matchList;
						}else{
							uni.showToast({
								title: '请求错误',
								icon: 'fail',
								mask: true,
								duration: 3000
							})
						}
					},
					fail:(res)=>{
						uni.showToast({
							title: '请求失败',
							icon: 'fail',
							mask: true,
							duration: 2000
						})
					},
					complete:()=>{
						uni.hideLoading();
					}
				})
			},
			
			clearModal(e){
				for (let i = 0, lenI =  this.statecheck.length; i < lenI; ++i) {
					this.statecheck[i].checked=false;
				}
				for (let i = 0, lenI =  this.typecheck.length; i < lenI; ++i) {
					this.typecheck[i].checked=false;
				}
				for (let i = 0, lenI =  this.timecheck.length; i < lenI; ++i) {
					this.timecheck[i].checked=false;
				}
				for (let i = 0, lenI =  this.provincecheck.length; i < lenI; ++i) {
					this.provincecheck[i].checked=false;
				}
				this.sx_type={"type":-1,"name":""};
				this.sx_state={"state":-1,"name":""};
				this.sx_timelength={"timelength":-1,"name":""};
				this.sx_prov=[];
			},
			ChooseCheckbox(e) {
				let items = this.statecheck;
				let values = e.currentTarget.dataset.value;
				
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].state == values) {
						items[i].checked = !items[i].checked;
						if(items[i].checked==true){
							this.sx_state.state=items[i].state;
							this.sx_state.name=items[i].name;
							//this.$set(this.sx_state,0,{"id":items[i].state,"name":items[i].name});
						}else{
							this.sx_state.state=-1;
						}
					}else{
						items[i].checked=false;
						items[i].checked=false;
					}
				}
			},
			timeCheckbox(e){
				let items = this.timecheck;
				let values = e.currentTarget.dataset.value;
				
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].timelength == values) {
						items[i].checked = !items[i].checked;
						if(items[i].checked==true){
							this.sx_timelength.timelength=items[i].timelength;
							this.sx_timelength.name=items[i].name;
							//this.$set(this.sx_timelength,0,{"id":items[i].timelength,"name":items[i].name});
						}else{
							this.sx_timelength.timelength=-1;
						}
					}else{items[i].checked=false;
						items[i].checked=false;
					}
				}
			},
			typeCheckbox(e){
				let items = this.typecheck;
				let values = e.currentTarget.dataset.value;
				
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].type == values) {
						items[i].checked = !items[i].checked;
						if(items[i].checked==true){
							this.sx_type.type=items[i].type;
							this.sx_type.name=items[i].name;
							//this.$set(this.sx_type,0,{"id":items[i].type,"name":items[i].name});
						}else{
							this.sx_type.type=-1;
						}
					}else{items[i].checked=false;
						items[i].checked=false;
					}
				}
			},
			provinCheckbox(e){
				let items = this.provincecheck;
				let values = e.currentTarget.dataset.value;
				
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].id == values) {
						items[i].checked = !items[i].checked;
						if(items[i].checked==true){
							this.sx_prov.push({"id":items[i].id,"name":items[i].name});
							//this.selectoption.push({"provin":items[i].name});
						}else{
							let index = this.sx_prov.findIndex(item=>{
								if(item.id==items[i].id){
									return true;
								}
							
							})
							this.sx_prov.splice(index,1);
						}
						break;
					}
				}
			},
			search_match(e){
				if(this.searchval.length>0){
					this.newml=[];
					for (let i=0;i<this.matchList.length;i++) {
						if(this.matchList[i].matchname.indexOf(this.searchval)>=0){
							this.newml.push(this.matchList[i]);
						}
					}
					return this.newml;
					
				}else{
					this.newml=this.matchList
					return this.newml;
				}
			},
			
			cardSwiper(e) {
				this.cardCur = e.detail.current
			}
		},
	}
</script>

<style>
.padding-t{
	padding-top:20upx;
	padding-left: 20upx;
	padding-bottom: 10upx;
}
.search{
	flex-wrap: nowrap;
}
page{
	font-size: 14px;
}

.card-swiper swiper-item 
{
	padding:10rpx 0rpx 0rpx;
}
.card-swiper{
	height: 320rpx !important;
}

.week{
	font-size: 28rpx;
	height: 38rpx;
	color:gray
}

.matchinfo{
	height: 38rpx;
	overflow: hidden;
}
.cu-card>.cu-item{
	margin:20rpx;
}

.tips{
	margin:20rpx 30rpx;
	margin-bottom: 0upx;
	background-color: #ffffff;
	color:gray;
	font-size: 30rpx;
}
.upreason{
	border-radius: 15rpx;
	margin-right:15rpx;
}
.main-match{
	padding-bottom:120rpx;
}
.sx-title{
	display: flex;
	margin: 20rpx;
}
.sx-content{
	font-size: 25rpx;
	padding-left:0rpx;
	padding-right: 0rpx;
	margin:5rpx;
}
.basis-lg {
	flex-basis: 70%;
}
.sel-info{
	margin-left: 20rpx;
}
.sel-option{
	margin:5rpx;
	padding: 10rpx;
}
.cu-tag+.cu-tag{
	margin-left: 5rpx;
}
</style>
